import React, { useState, useReducer } from "react";
import { NavBar, InputItem, Button, Toast } from "antd-mobile";
import { Link } from "react-router-dom";
import { initState, reducer, actions } from "./user";
import "./Login.less";
import { reqLogin } from "../../http/api";
export default function Login(props) {
  // 引入useReducer reduce（） initState（）
  const [state, dispatch] = useReducer(reducer, initState);
  const [user, setUser] = useState({
    phone: "",
    password: "",
  });
  const doLogin = () => {
    reqLogin(user).then((res) => {
      if (res.data.code === 200) {
        // 弹成功
        Toast.info(res.data.msg,1);
        // 用户信息存入仓库
        // 存入仓库
        dispatch(actions.changeInfo(res.data.list));

        // 跳转页面
        props.history.push("/index/home");
      }
    });
  };
  return (
    <div className="login">
      <NavBar>登录页</NavBar>
      {/* {JSON.stringify(this.state.user)} */}
      <InputItem
        placeholder="账号"
        onChange={(val) => setUser({...user,phone:val})}
      >
        账号
      </InputItem>
      <InputItem
        placeholder="密码"
        onChange={(val) => setUser({...user,password:val})}
      >
        密码
      </InputItem>
      <Button type="primary" className="but" onClick={() => doLogin()}>
        登录
      </Button>
      <Link to="/register">注册</Link>
    </div>
  );
}
